<template>
  <div class="affairs-process">
    <div class="header">
      <router-link to="/main/process" class="back-btn">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </router-link>
      <h2>行政事务管理流程</h2>
    </div>

    <div class="content">
      <!-- 流程步骤 -->
      <el-steps :active="activeStep" finish-status="success" align-center>
        <el-step title="事务申请" description="填写事务申请"></el-step>
        <el-step title="事务处理" description="处理事务"></el-step>
        <el-step title="处理反馈" description="反馈处理结果"></el-step>
        <el-step title="满意度评价" description="评价处理结果"></el-step>
      </el-steps>

      <!-- 流程内容区域 -->
      <div class="process-content">
        <router-view></router-view>
        
        <!-- 步骤操作按钮 -->
        <div class="step-actions">
          <el-button 
            v-if="activeStep > 0" 
            @click="prevStep">
            <i class="el-icon-arrow-left"></i> 上一步
          </el-button>
          <el-button 
            type="primary" 
            @click="nextStep"
            v-if="activeStep < processSteps.length - 1">
            下一步 <i class="el-icon-arrow-right"></i>
          </el-button>
          <el-button 
            type="success" 
            @click="finishProcess"
            v-else>
            完成 <i class="el-icon-check"></i>
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AdminAffairsProcess',
  data() {
    return {
      activeStep: 0,
      processSteps: [
        { path: 'apply', title: '事务申请' },
        { path: 'handle', title: '事务处理' },
        { path: 'feedback', title: '处理反馈' },
        { path: 'evaluate', title: '满意度评价' }
      ]
    }
  },
  methods: {
    nextStep() {
      if (this.activeStep < this.processSteps.length - 1) {
        this.activeStep++
        this.navigateToStep()
      }
    },
    prevStep() {
      if (this.activeStep > 0) {
        this.activeStep--
        this.navigateToStep()
      }
    },
    navigateToStep() {
      this.$router.push(`/main/xingzheng/affairs/${this.processSteps[this.activeStep].path}`)
    },
    finishProcess() {
      this.$confirm('确认完成全部流程？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success'
      }).then(() => {
        this.$message.success('流程已完成')
        this.$router.push('/main/process')
      }).catch(() => {})
    }
  },
  created() {
    // 根据当前路由设置初始步骤
    const currentPath = this.$route.path.split('/').pop()
    const stepIndex = this.processSteps.findIndex(step => step.path === currentPath)
    if (stepIndex !== -1) {
      this.activeStep = stepIndex
    }
  }
}
</script>

<style lang="scss" scoped>
.affairs-process {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;
    }

    h2 {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);

    .el-steps {
      margin-bottom: 30px;
    }

    .process-content {
      max-width: 1000px;
      margin: 0 auto;
      padding: 20px;
      
      .step-actions {
        margin-top: 30px;
        padding-top: 20px;
        border-top: 1px solid #EBEEF5;
        text-align: center;
        
        .el-button {
          margin: 0 10px;
          padding: 12px 25px;
          
          i {
            margin: 0 5px;
          }
        }
      }
    }
  }
}
</style> 